<script lang="tsx">
import { Component, Vue, Model, Prop } from 'vue-property-decorator'
import { VNodeData } from 'vue'

@Component({
  name: 'Input',
})
export default class extends Vue {
  render() {
    return (
      <input
        class='my-input'
        type={ this.type }
        placeholder={ this.placeholder }
        value={ this.value }
        onInput={ (e: InputEvent) => { this.$emit('input', (e.target as HTMLInputElement).value) } }
        { ...{
          attrs: this.$attrs,
          on: this.$listeners,
        } as VNodeData}
      />
    )
  }

  @Model('input', { type: String, default: '' }) value!: string

  @Prop({ type: String, default: '' }) type!: string

  @Prop({ type: String, default: '' }) placeholder!: string
}
</script>

<style lang="scss" scoped>
$input-height: 32px;
$bg-color: rgb(255, 255, 255);
$border-color: rgb(204, 204, 204);
$active-border-color: rgb(102, 175, 233);
$shadow-color: rgba(0, 0, 0, .1);
$active-shadow-color: rgba(102, 175, 233, .8);

// placeholder
@mixin placeholder($color: #889aa4) {
  input::-webkit-input-placeholder { /* WebKit browsers */
    color: $color;
  }
  input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: $color;
  }
  input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: $color;
  }
  input:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: $color;
  }
}

@include placeholder;
.my-input {
  border: 1px solid $border-color;
  border-radius: 5px;
  height: $input-height;
  line-height: $input-height;
  padding: 0 10px;
  background-color: $bg-color;
  box-shadow: 0 0 3px $shadow-color inset;
  transition: all 200ms;
  outline: none;
  &:focus,
  &:active {
    border-color: $active-border-color;
    box-shadow: 0 0 5px $active-shadow-color;
  }
}
</style>
